<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
        <title>Deposits and Withdrawals</title>
        <script type="text/javascript" src='http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js'></script>
        <!--<script src="http://cdn.bootcss.com/vue/2.0.24/vue.js"></script>-->
        <script src="http://cdn.bootcss.com/vue/2.1.6/vue.js"></script>
		<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
		<script src="../js/exfun.js"></script>
		<script src="../build/fields.pack.js"></script>
		<!--<link href="http://cdn.bootcss.com/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css" rel="stylesheet">-->
			<script src="//cdn.bootcss.com/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
			<!--<script src="//cdn.bootcss.com/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.zh-CN.min.js"></script>-->
	<script type="text/javascript">
	$(function () {
		$('#sandbox-container input').datepicker({
		    language: "zh-CN",
		     format: "yyyy/mm",
			startView: "months",
			minViewMode: "months",
			autoclose: true,

		})
//
//
//		$('#sandbox-container .input-group.date').datepicker({
//		    format: "yyyy/mm/dd",
//		    weekStart: 0,
//		    language: "zh-CN",
//		    daysOfWeekHighlighted: "0,6",
//		    autoclose: true,
//		    todayHighlight: true
//		});
//
//
//		$('#sandbox-container .input-daterange').datepicker({
//		    format: "yyyy/mm/dd",
//		    weekStart: 0,
//		    language: "zh-CN",
//		    calendarWeeks: true,
//		    autoclose: true,
//		    todayHighlight: true
//		});

		new Vue({
			el:'#there',
			data:{
				date:'',
				datetime:'',
				month:''
			},
			methods:{
				input_value:function () {
					this.date='2017/01-19'
				}
			}
		})

//		$(".form_datetime").datetimepicker({format: 'yyyy-mm-dd hh:ii'});
	})
	Vue.component('com-datepicker',{
		template:'#com-datepicker',
		props:['value'],
		mounted:function () {
			var self=this
			self.input=$(this.$el)
//			$(this.$el).datepicker({
//				    language: "zh-CN",
//				     format: "yyyy/mm/dd",
//				     autoclose: true,
//				     todayHighlight: true,
//				}).on('changeDate', function(e) {
//					self.$emit('input',self.input.val())
//    		})
		},
		watch:{
			value:function (n) {
				this.input.val(n)
			}
		}
	})
	
	</script>
	</head>
    <body >
	    <div id='sandbox-container'>
		    <input type="text" class="form-control">

			<div class="input-group date">
			  <input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
			</div>

			 <div class="input-daterange input-group" id="datepicker">
			    <input type="text" class="input-sm form-control" name="start" />
			    <span class="input-group-addon">to</span>
			    <input type="text" class="input-sm form-control" name="end" />
			</div>
	    </div>

	    <div id="there" class="test">
		    <!--<com-datepicker v-model='date'></com-datepicker>-->
			<date v-model="month" set="month"></date>
			<input type="text" v-model="month">
			<date v-model="date"></date>
			<input type="text" v-model="date">
	    	<button name="test" type="button" value="val" @click='input_value()'>Button Text</button>
			<date v-model="date" :config="{language:'en'}"></date>

			<datetime v-model="datetime"></datetime>
			<datetime v-model="datetime"></datetime>
	    </div>

		<template id='com-datepicker'>
			<input type="text" class="form-control">
		</template>



		<!--<input size="16" type="text" value="2012-06-15 14:45" readonly class="form_datetime">-->
    </body>
    <style type="text/css" media="screen" id="test">
    	.datepicker table tr td.highlighted{
	    	background-color: #E7E7E7;
    	}
    </style>
</html>
	